@extends('layout.home')

<!-- 导航链接  start -->
   @section('head-top')
      <style>
          .huodong
          {
            height:80px;
            width:100%;
            background-color:#00A1E1;
            position:relative;
            line-height:80px;

          }
          .active li div{
              height:80px;
              /*margin-right:50px;*/

          }
          
          .active li div a{
            color:white;
            font-size:24px;
            font-family:宋体;
            line-height:50px;
            text-align:center;
            /*margin-left:50px;*/
            text-decoration:none;
          }
          #first{
            /*margin-left:150px;*/
          }
          .weather{
            position:absolute;
            left:0px;
            top:0px;
          }
          .active li div{
            text-align: center;
            height:50px;
            width:200px;
            
          }
          .active li{
            background-color:#00A1E1;
            padding:0px;
          }
          
          /*.one:hover,.two:hover,.three:hover,.four:hover,.five:hover{
            color:white;
          }*/
          .active li div:hover{
            height:80px;
            background:#0098D1;
          }

      </style>
        
      <div class='huodong'>
            <ul class='list-unstyled list-inline active text-center'>
                <li><div id='first'><a class='one' href="#特价促销">特价促销</a></div></li>
                <li><div><a class='two' href="#清仓处理">清仓处理</a></div></li>
                <li><div><a class='three' href="#限时折扣">限时折扣</a></div></li>
                <li><div><a class='four' href="#本月热销">本月热销</a></div></li>
                <li><div><a class='five' href="#精品推荐">精品推荐</a></div></li>
            </ul>    
      </div>
   @endsection
 <!-- 导航链接  end -->

 @section('content')

  <!-- 特效轮播 start -->
    <style>
        .col-md-12{
            padding:0px;
            margin:0px;
            height:500px;
            margin-top: 10px;
        }
        .tejia{
            height:100px;
            background-color:#00A1E1;
            font-family:宋体;
            color:white;
            text-align:center;
            line-height:100px;
            margin-top:10px;
        }
        .tejia1{
            height:100px;
            background-color:#00A1E1;
            font-family:宋体;
            color:white;
            text-align:center;
            line-height:100px;
            margin-bottom:30px;
        }
        #tejia2{
            height:100px;
            background-color:#00A1E1;
            font-family:宋体;
            color:white;
            text-align:center;
            line-height:100px;
            margin-top:45px;
        }
        .sales-list li{
            height:400px;
            width:300px;
            border:solid 1px #ddd;
            margin-top:30px;
            margin-left:5px;

        }
        .img{
            width:250px;
            height:280px;
            margin-left:20px;
        }
        .salse{
          position:relative;
        }
        .sales1{
          margin-top:30px;
          position:absolute;
          top:1205px;
        }
        .salse1 div{
          margin-top:30px;
        }
        .sales2{
          position:absolute;
          top:1726px;
          margin-top:3px;
          padding:0px;
        }
        h2{text-decoration:none;}
        a,img{border:0;}

        .scroll{
          height:400px;
          width:300px;
          margin-top:20px;
          border:solid 1px #ddd;
        }
        .scroll p{
          line-height:28px;
          padding:5px 0;
          border-bottom:dashed 1px #ddd;
          text-align:center;
        }
        .scroll p a{
          color:#3366cc;
          text-decoration:none;
        }
        .scroll p img{
          width:200px;
          height:200px;

        }
        .sales-list h4 a{
          text-decoration:none;
          font-size:16px;
        }
    </style>
    <div class="rotating-slideshow col-md-12">
        <div id="slider-main" data-position="1" data-deg="0">
            <div id="slider-btns" class="button">
                <a id="pos1" href="#" class="pos1" data-position="1"></a>
                <a id="pos2" href="#" class="pos2" data-position="4"></a>
                <a id="pos3" href="#" class="pos3" data-position="3"></a>
                <a id="pos4" href="#" class="pos4" data-position="2"></a>
            </div>
            <div class="slider-overlay">
                <div class="active" data-position="1">
                    <h3> 阿迪达斯 adids</h3>
                </div>
                <div data-position="2">
                    <h3>购物 shopping</h3>
                </div>
                <div data-position="3">
                    <h3>运动 sports</h3>
                </div>
                <div data-position="4">
                    <h3>时尚  fashion</h3>
                </div>
            </div>
            @for($i=0;$i<=4;$i++)
             @foreach($res as $k=>$v)
              <div class="slides">
                  <img class="active" src="{{$v->pic}}" data-position="{{$k+1}}">
              </div>
              @endforeach
            @endfor
            <img class="spinner-btn" src="/homes/images/1.png" alt="">
            <img class="spinner" src="/homes/images/6.jpg" alt="">
        </div>
    </div>
  <!-- 特效轮播 end -->

    <div class="clearfix"></div>

  <!-- 首页产品 start -->
   <div class='container-fluid' style='height:1650px;'>
      <!-- 特价促销 start -->
       <div >
           <a name='特价促销'><h2 class='tejia' >特价促销</h2></a>
           <ul class='list-unstyled list-inline sales-list'>
             @foreach($data as $k=>$v)
                <li>
                    <div class='img simpleCart_shelfItem'>
                        <a href="/home/detail/{{$v->id}}.html">
                            <img class='img-responsive' src="{{$v->path}}" alt="" class='img'>
                        </a>
                    </div>
                    <h4><a href="/home/detail/{{$v->id}}.html" >{{$v->title}}</a></h4><br>
                    <div class="price">
                        <h5 class="item_price" style="font-size:18px;"><del>￥{{$v->oldPrice}}</del></h5>
                        <h5 class="item_price" style="color:red">￥{{$v->price}}</h5>
                        <a href="/home/detail/{{$v->id}}.html" class="item_add">点击查看</a>
                        <div class="clearfix"> </div>
                    </div>     
                </li>
              @endforeach
           </ul>
       </div>
      <!-- 特价促销 end -->

       <div>
          <ul class='list-unstyled list-inline sales'>
            <!-- 清仓处理 start -->
              <li>
                  <a name='清仓处理'><h2 class='tejia'>清仓处理</h2></a>
                  <ul class='list-unstyled list-inline sales-list'>
                    @foreach($data3 as $k=>$v)
                        <li>
                            <div class='img simpleCart_shelfItem'>
                                <a href="/home/detail/{{$v->id}}.html">
                                    <img class='img-responsive' src="{{$v->path}}" alt="" class='img'>
                                </a>
                            </div>
                            <h4><a href="/home/detail/{{$v->id}}.html">{{$v->title}}</a></h4><br>
                            <div class="price">
                                <h5 class="item_price" style="font-size:18px;"><del>￥{{$v->oldPrice}}</del></h5>
                        <h5 class="item_price" style="color:red">￥{{$v->price}}</h5>
                                <a href="/home/detail/{{$v->id}}.html" class="item_add">点击查看</a>
                                <div class="clearfix"> </div>
                            </div>     
                        </li>
                      @endforeach
                 </ul>
              </li>
            <!-- 清仓处理 end -->
              
              <li class='sales1'>
                  <a name='本月热销'><h2 class='tejia1'>本月热销</h2></a>
                  <div class="scroll" id="xst">
                  @foreach($data2 as $k=>$v)
                    <p><a href="/home/detail/{{$v->id}}.html"><img alt='' src="{{$v->path}}" /></a></p>
                    <p><a href="#">{{$v->title}}</a></p>
                  @endforeach
                </div>
              </li>
          </ul>  
       </div>
       <!-- <div > -->
          <ul class='list-unstyled list-inline sales'>
            <!-- 限时折扣 start -->
              <li>
                  <a name='限时折扣'><h2 class='tejia'>限时折扣</h2></a>
                  <ul class='list-unstyled list-inline sales-list'>
                    @foreach($data4 as $k=>$v)
                        <li>
                            <div class='img simpleCart_shelfItem'>
                                <a href="/home/detail/{{$v->id}}.html">
                                    <img class='img-responsive' src="{{$v->path}}" alt="" class='img'>
                                </a>
                            </div>
                            <h4><a href="/home/detail/{{$v->id}}.html">{{$v->title}}</a></h4><br>
                            <div class="price">
                                <h5 class="item_price" style="font-size:18px;"><del>￥{{$v->oldPrice}}</del></h5>
                                <h5 class="item_price" style="color:red">￥{{$v->price}}</h5>
                                <a href="/home/detail/{{$v->id}}.html" class="item_add">点击查看</a>
                                <div class="clearfix"> </div>
                            </div>     
                        </li>
                      @endforeach
                 </ul>
              </li>
            <!-- 限时折扣 end -->

              <li class='sales2'>
                  <a name='精品推荐'><h2 id='tejia2'>精品推荐</h2></a>
                  <ul class='list-unstyled sales-list '>
                     @foreach($data5 as $k=>$v)
                        <li>
                            <div class='img simpleCart_shelfItem'>
                                <a href="/home/detail/{{$v->id}}.html">
                                    <img class='img-responsive' src="{{$v->path}}" alt="" class='img'>
                                </a>
                            </div>
                            <h4><a href="/home/detail/{{$v->id}}.html">{{$v->title}}</a></h4><br>
                            <div class="price">
                                <h5 class="item_price" style="font-size:18px;"><del>￥{{$v->oldPrice}}</del></h5>
                                <h5 class="item_price" style="color:red">￥{{$v->price}}</h5>
                                <a href="/home/detail/{{$v->id}}.html" class="item_add">点击查看</a>
                                <div class="clearfix"> </div>
                            </div>     
                        </li>
                      @endforeach
                 </ul>
              </li>
          </ul> 
       <!-- </div>  -->
   </div>
    
  <!-- 轮播特效 start-->
    <script src="/homes/js/t1.js" type="text/javascript"></script>
    <script src="/homes/js/t2.js"></script>
    <script>
        $(document).ready(function(){
          $('.rotating-slideshow').rotatingSlideshow({
            sliderHolder: '#slider-main',
            btnsHolder: '#slider-btns',
            audioHolder: '#slider-sound',
            auto: true,
            autoSpeed: '3000'
          });
        });
    </script>
  <!-- 轮播特效 end-->

  <!-- 产品特效 start-->
    <script type="text/javascript">
        function addEventSimple(obj,evt,fn){
            if(obj.addEventListener){
                obj.addEventListener(evt,fn,false);
            }else if(obj.attachEvent){
                obj.attachEvent('on'+evt,fn);
            }
        }

        addEventSimple(window,'load',initScrolling);

        var scrollingBox;
        var scrollingInterval;
        var reachedBottom=false;
        var bottom;

        function initScrolling(){
            scrollingBox = document.getElementById('xst');
            scrollingBox.style.overflow = "hidden";
            scrollingInterval = setInterval("scrolling()",50);
            scrollingBox.onmouseover = over;
            scrollingBox.onmouseout = out; 
        }

        function scrolling(){
          var origin = scrollingBox.scrollTop++;
          if(origin == scrollingBox.scrollTop){
              if(!reachedBottom){
                scrollingBox.innerHTML+=scrollingBox.innerHTML;
                reachedBottom=true;
                bottom=origin;
              }else{
                scrollingBox.scrollTop=bottom;
              }
          }
        }

        function over(){
          clearInterval(scrollingInterval);
        }
        function out(){
          scrollingInterval = setInterval("scrolling()",50);
        }

        // 限时特价 
        // 获得现在的时间  活动天数  截止时间
        var startTime = new Data();
        dd(startTime);
        


    </script>
  <!-- 产品特效  end-->

 @endsection